<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期初始化阶段和挂载阶段</title>
</head>
<body>
<div id="app">
    <p ref="pp" v-show="isShow">{{isShow ? '我爱你赵丽颖' : '我爱你杨幂'}}</p>
    <button @click="destory">点击销毁实例</button>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                isShow: true,
            }
        },
        methods:{
            //必须在某个特定的场合自己手动调用vm.$destory方法 才能进入销毁阶段
            destory(){
                this.$destroy();
            }
        },
        //初始化结算有两个钩子(回调函数) beforeCreate created
        beforeCreate() {
            //初始化之前最大的特点是数据还没代理好 打印不到
            console.log(this.isShow);
        },
        created() {
            //初始化之前数据就能被访问了
            console.log(this.isShow);
        },
        //挂载阶段 挂载前和挂载后
        beforeMount() {
            console.log(this.$refs.pp);

        },
        mounted() {
            //这个钩子用的是最多的 一般用于发送ajax请求 还用于定时器添加一些事件
            console.log(this.$refs.pp);
            this.timer=setInterval(() => {
                this.isShow = !this.isShow
            }, 1000);

        },
        //前两个阶段完成 代表初始化展示页面就完成了 页面数据更新前和页面数据更新 不是vm的数据
        beforeUpdate() {
            //页面更新前 vm数据已经做了更新了,但是此时页面的数据还没有更新过来
            console.log(this.isShow, this.$refs.pp.innerHTML);
        },
        updated() {
            //页面更新后vm的数据已经做了更新了 页面的数据也更新过来了
            console.log(this.isShow, this.$refs.pp.innerHTML);
        },
        //销毁阶段
        beforeDestory(){
          // 销毁之前一般这个钩子用的时候比较频繁 通常是在销毁前解绑事件监听 取消定时器操作
            clearInterval(this.timer);//定时器管理模块会吧这个定时器给停止,但是并没有吧这个变化从timer当中销毁
            this.timer=null;//彻底清除定时器
        },
        // if(!this.timer){
        //     //这句话的意思是如果没有定时器 才创建一个定时器 后期订单项目里用
        //     this.timer=setInterval(()=>{},1000)
        // },
        destory() {
        //销毁之后
            console.log('vm销毁了');
        }
    });
</script>
</body>
</html>